<template>
    <div class="app-container">
        <div class="body-title">
            角色{{createStatus?'新增':'更新'}}
        </div>
        <el-row :gutter="10">
                <div class="content-title" style="font-size: 20px">角色基本信息</div>
          <div style="width: 50%;float: left">
                <el-form :model="roleForm"  ref="roleForm" :rules="roleFromRule" label-width="100px" style="width: 90%;margin: 0 auto">
                    <el-form-item label="角色名称" prop="name">
                        <el-input type="text" v-model="roleForm.name" placeholder="请输入角色名称" clearable style="text-align: center"></el-input>
                    </el-form-item>
                    <el-form-item label="角色编码" prop="code" align="center">
                      <el-select style="width: 100%" v-model="roleForm.code" :disabled="!createStatus" ref="selectUpResId" placeholder="请选择角色编号">
                        <el-option
                            v-for="dict in roleOptions"
                            :key="dict.dictValue"
                            :label="dict.dictLabel"
                            :value="dict.dictValue"
                        />
                      </el-select>
                    </el-form-item>
                    <el-form-item label="角色描述" prop="remark" align="center">
                        <el-input type="text"  v-model="roleForm.remark" placeholder="请输入角色描述" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="角色状态" prop="isUse">
                        <el-switch
                                v-model="roleForm.isUse"
                                active-color="#13ce66"
                                inactive-color="#ff4949">
                        </el-switch>
                    </el-form-item>
                </el-form>
          </div>
                <div class="content-title" style="width: 50%;float: right">
                    <div class="text-center margin-bottom10" style="font-size: 14px; width: 50%;">请选择角色可操作资源</div>
                    <div style="width: 70%;margin: 0 auto  ; display: flex;">
                        <el-tree :data="permissionData" show-checkbox node-key="id" ref="tree"
                                 highlight-current :props="defaultProps" @check="handleCheckChange">
                        </el-tree>
                    </div>
                </div>
        </el-row>

        <div slot="footer" style="text-align: center" class="dialog-footer">
            <el-button @click="cancelRole">取 消</el-button>
            <el-button :loading="addLoading" v-if="createStatus" type="primary" @click="createRole">创 建</el-button>
            <el-button :loading="addLoading" v-else type="primary" @click="updateRole">修 改</el-button>
        </div>
    </div>
</template>

<script>
import {addInRole, getInRoleVo, updateInRole,getInPermissionList} from "@/api/role";

export default {
    name: "roleForm",
    data(){
        return{
            roleForm:{
                ids:[],
                type:0,
                isUse:true
            },
            addLoading:false,
            permissionData:[],
          roleOptions:[],
            defaultProps: {
                children: 'children',
                label: 'name'
            },
            roleFromRule:{
              name: [{ required: true, message: '角色名称不能为空', trigger: 'blur' }],
              type: [{ required: true, message: '请选择角色类型', trigger: 'blur' }],
            },


        }
    },
    computed:{
        createStatus(){
            return this.$route.query.ucId == undefined
        }
    },
    created() {
      this.getDicts("role_code").then(response => {
        this.roleOptions = response.data.data;
      });
        this.getInPermissionList()
        if (!this.createStatus){
            let ucId = this.$route.query.ucId
            this.getInRoleVo(ucId)
        }
    },
    methods:{
        handleCheckChange(data, val) {
          // console.log(data,val)
            this.roleForm.ids = val.checkedKeys.concat(val.halfCheckedKeys);
          // console.log(val)
          // this.roleForm.ids.concat(val.checkedKeys,val.halfCheckedKeys)
          // console.log(this.roleForm.ids)
        },
        getInPermissionList(){
            getInPermissionList({}).then(res=>{
                // console.log(res)
                this.permissionData=res.data
            }).catch(res=>{

            })
        },
        getInRoleVo(val){
            getInRoleVo({ucId:val}).then(res=>{
                // console.log(res)
                this.roleForm = Object.assign({},res.data)
                // console.log( this.roleForm)
                this.$refs.tree.setCheckedKeys(this.roleForm.ids);

            }).catch(res=>{

            })
        },
        cancelRole(){
            window.history.back()
        },
        createRole(){
            this.addLoading = true
            this.$refs['roleForm'].validate(valid => {
                if (valid){
                    addInRole(this.roleForm).then(res=>{
                        this.addLoading = false
                        this.$notify.success({
                            title: '成功',
                            message: "添加角色成功"
                        })
                        this.cancelRole()
                    }).catch(res=>{
                        this.addLoading = false
                        this.$notify.error({
                            title: '失败',
                            message: res.msg
                        })
                    })
                }else {
                    this.addLoading = false
                    console.log("表单验证不通过")
                }
            })
        },
        updateRole(){
            this.addLoading = true
            this.$refs['roleForm'].validate(valid => {
                if (valid){
                    this.roleForm.isStatus=true
                    console.log(this.roleForm.isStatus)
                    updateInRole(this.roleForm).then(res=>{
                        this.addLoading = false
                        this.$notify.success({
                            title: '成功',
                            message: "更新管理员成功"
                        })
                        this.cancelRole()
                    }).catch(res=>{
                        this.addLoading = false
                        this.$notify.error({
                            title: '失败',
                            message: res.msg
                        })
                    })
                }else {
                    this.addLoading = false
                    console.log("表单验证不通过")
                }
            })
        }
    }
}
</script>

<style scoped>
.body-title{
    font-size: 20px;
}
.flex-form-main{
  display: flex;
  justify-content: center
}
</style>
